<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div id="content" class="col-lg-10 col-sm-10">
    <!-- content starts -->
    <div>
        <ul class="breadcrumb">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">View TimeTable for Division</a>
            </li>
        </ul>
    </div>



    <div class="row">
        <div class="box col-md-12">
            <div class="box-inner">
                <div class="box-header well" data-original-title="">
                    <h2>Time Table for : <c:if test="${sessionScope.division.semester eq 1}">${sessionScope.division.semester} st</c:if>
                        <c:if test="${sessionScope.division.semester eq 2}">${sessionScope.division.semester}nd</c:if>
                        <c:if test="${sessionScope.division.semester eq 3}">${sessionScope.division.semester}rd</c:if>
                        <c:if test="${sessionScope.division.semester ne null}">${sessionScope.division.semester}th</c:if>

                        ${sessionScope.division.branch.name} ${sessionScope.division.name} </h2>

                    <div class="box-icon">

                    </div>
                </div>
                <div class="box-content">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Days</th>
                                    <c:forEach var="day" items="${sessionScope.days}" varStatus="i">
                                    <th>
                                        <c:if test="${i.count eq 1}">
                                            Monday
                                        </c:if>
                                        <c:if test="${i.count eq 2}">
                                            Tuesday
                                        </c:if>
                                        <c:if test="${i.count eq 3}">
                                            Wednesday
                                        </c:if>
                                        <c:if test="${i.count eq 4}">
                                            Thursday
                                        </c:if>
                                        <c:if test="${i.count eq 5}">
                                            Friday
                                        </c:if>
                                        <c:if test="${i.count eq 6}">
                                            Saturday
                                        </c:if>
                                    </th>                                  
                                </c:forEach>

                            </tr>
                        </thead>
                        <tbody>

                            <c:forEach begin="1" end="${sessionScope.parameters.lecturesperday}" var="i" varStatus="j">
                                <tr id="tr_${j.count}">
                                    <td>${i}</td>
                                    <c:forEach  var="day" items="${sessionScope.days}" >
                              
                                    <td id="td_id_${day.get(i-1).id}" class="center"   <c:if test="${day.get(i-1).type ne true}"> style="background:yellow" </c:if> >

                                            <select name="subject" class="select2" id="subject_${day.get(i-1).day}_${day.get(i-1).lecno}">
                                            <c:forEach items="${sessionScope.subjects}" var="fs">                                                  
                                                <option value="${fs.subid}" id="td_${fs.subid}_${i}" <c:if test="${day.get(i-1).subid eq fs.subid}"> selected="true" </c:if>>${fs.subject.name}</option>
                                            </c:forEach>
                                        </select>
                                        <br>
                                        <select name="faculty" class="select1"  id="faculty_${day.get(i-1).day}_${day.get(i-1).lecno}" >
                                            <c:forEach items="${sessionScope.subjects}" var="fs">                                                  
                                                <option  value="${fs.fid}"  <c:if test="${day.get(i-1).fid eq fs.fid}"> selected="true" </c:if>  >${fs.faculty.fname} &nbsp; ${fs.faculty.lname} </option>
                                            </c:forEach>
                                        </select>


                                    </td>
                              
                            </c:forEach>


                            </tr>
                        </c:forEach>

                        </tbody>
                    </table>
                    <c:if test="${sessionScope.save eq false}">
                        <a href="SaveTimetableAction.do"><input type="button" id="save_btn" value="save"/></a>
                        </c:if>  

                    <table>
                        <thead>
                        <th>Subject Name</th>
                        <th>Lectures Per Week Left</th>
                        <th>Labs Per Week Left</th>
                        </thead>
                        <tbody>
                            <c:forEach var="fs" items="${sessionScope.subjects}">
                                <tr>
                                    <td>${fs.subject.name}</td>
                                    <td>${fs.subject.lecturesperweek}</td>
                                    <td>${fs.subject.labsperweek}</td>
                                </tr>
                            </c:forEach>
                        </tbody>

                    </table>


                </div>
            </div>
        </div>
        <!--/span-->


        <!--/span-->
    </div>

</div>
<script>
    window.onload = function() {
//for no repetation in dropdown of manual changes for faculty and subject
        $(".select").each(function() {
            var x = [];

            $("option", this).each(function() {
                // alert($(this).parent().html());
                if ($(this).is(":checked")) {
                    x[$(this).val()] = "<option selected='true'>" + $(this).html() + "</option>";
                }
                else {
                    x[$(this).val()] = "<option>" + $(this).html() + "</option>";
                }
            });
            $(this).html(x);
            console.log(x);
        });

    };


    $(".select1").change(function() {
        var id = $(this).attr("id");
        var divid =${sessionScope.division.id};

        var fid = $("option:selected", this).attr("value");
        $.ajax({
            type: "POST",
            url: "ChangeTimetableAjaxAction.do",
            data: "id=" + id + "&fid=" + fid + "&divid=" + divid,
            success: function(data) {
                console.log(data);
                data = JSON.parse(data);
                var html = "";

                if (data === null) {
                    alert("the faculty is already assign in another division please select other faculty");
                    id = id.substring(7);
                    $("#subject" + id).empty();


                }
                $(data).each(function(index, subject) {
                    html += "<option value=" + subject.subid + ">" + subject.subject.name + "</option>";
                });
                id = id.substring(7);
                $("#subject" + id).empty();
                $("#subject" + id).append(html);

            }
        });
    });


    $(".select2").change(function() {
        var id = $(this).attr("id");
        
        var subid = $("option:selected", this).attr("value");
        $.ajax({
            type: "POST",
            url: "ChangeTimetableAjaxActionForSubject.do",
            data: "id=" + id + "&subid=" + subid,
            success: function(data) {
                console.log(data);
                data = JSON.parse(data);
                var html = "";
                $(data).each(function(index, faculty) {
                    html += "<option value=" + faculty.fid + ">" + faculty.faculty.fname + faculty.faculty.lname + "</option>";
                });

                id = id.substring(7);
              
                $("#faculty" + id).empty();
                $("#faculty" + id).append(html);


            }
        });
    });





</script>